<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝鸡市残疾人服务平台</title>
    <link rel="stylesheet" href="job.css">
</head>
<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                    <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="explain.html"><li><span style="color: white">器械说明</span></li></a>
                    <a href="shopping.html"><li><span style="color: white">商城</span></li></a>
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                    <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                
                </div>
               
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>个人中心</span>
                    
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                    <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                    <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                    
                </ul>
            </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
    </script>
       <nav class="sidebar">...</nav>
       <!-- 主内容区 -->
       <!-- 筛选控件 -->
    <div class="filter-controls">
        <div class="filter-group">
            <label for="statusFilter" class="state">岗位状态：</label>
            <select id="statusFilter">
                <option value="all">全部状态</option>
                <option value="open">招聘中</option>
                <option value="paused">已暂停</option>
                <option value="closed">已结束</option>
            </select>
        </div>
        <!-- 添加搜索框 -->
<div class="filter-group">
    <input type="text"  id="searchInput" placeholder="搜索职位或公司...">
</div>
    </div>
    <!-- 岗位表格 -->
    <div class="jobs-container">
        <table class="jobs-table">
            <thead>
                <tr>
                    <th>索引</th>
                    <th>岗位名称</th>
                    <th>企业编号</th>
                    <th>企业名称</th>
                    <th>岗位状态</th>
                    <th>面试地点</th>
                    <th>联系方式</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 示例数据 -->
                <tr data-status="open">
                    <td data-label="索引">1</td>
                    <td data-label="岗位名称">岗位名称1</td>
                    <td data-label="企业编号">企业编号1</td>
                    <td data-label="企业名称">企业名称1</td>
                    <td data-label="岗位状态">
                        <span class="status-tag status-open">招聘中</span>
                    </td>
                    <td data-label="面试地点">XX市XX区XX大厦3层</td>
                    <td data-label="联系方式">张经理 138-1234-5678</td>
                    <td data-label="操作">
                        <div class="action-buttons">
                            <button class="btn btn-detail">详情</button>
                            <button class="btn btn-apply">应聘</button>
                        </div>
                    </td>
                </tr>
                <tr data-status="closed">
                    <td data-label="索引">2</td>
                    <td data-label="岗位名称">岗位名称2</td>
                    <td data-label="企业编号">企业编号2</td>
                    <td data-label="企业名称">企业名称2</td>
                    <td data-label="岗位状态">
                        <span class="status-tag status-closed">已结束</span>
                    </td>
                    <td data-label="面试地点">XX市XX区XX中心</td>
                    <td data-label="联系方式">李经理 021-12345678</td>
                    <td data-label="操作">
                        <div class="action-buttons">
                            <button class="btn btn-detail">详情</button>
                            <button class="btn btn-apply" disabled>已结束</button>
                        </div>
                    </td>
                </tr>
                <tr data-status="paused">
                    <td data-label="索引">3</td>
                    <td data-label="岗位名称">岗位名称3</td>
                    <td data-label="企业编号">企业编号3</td>
                    <td data-label="企业名称">企业名称3</td>
                    <td data-label="岗位状态">
                        <span class="status-tag status-closed">已暂停</span>
                    </td>
                    <td data-label="面试地点">XX市XX区XX中心</td>
                    <td data-label="联系方式">王经理 162-13545652</td>
                    <td data-label="操作">
                        <div class="action-buttons">
                            <button class="btn btn-detail">详情</button>
                            <button class="btn btn-apply" disabled>已暂停</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 状态筛选功能
        const statusFilter = document.getElementById('statusFilter');
        
        function filterJobs() {
            const status = statusFilter.value;
            document.querySelectorAll('.jobs-table tbody tr').forEach(row => {
                const rowStatus = row.dataset.status;
                const visible = (status === 'all') || (rowStatus === status);
                row.style.display = visible ? '' : 'none';
            });
        }
        // 事件监听
        statusFilter.addEventListener('change', filterJobs);
        // 初始化筛选
        filterJobs();
        // 动态更新按钮状态
        document.querySelectorAll('.btn-apply').forEach(btn => {
            const status = btn.closest('tr').dataset.status;
            if(status !== 'open') {
                btn.disabled = true;
                btn.textContent = {
                    closed: '已结束',
                    paused: '已暂停',
                }[status] || '不可申请';
            }
        });
        // 响应式优化
        function adjustLayout() {
            if(window.innerWidth < 768) {
                document.querySelectorAll('.jobs-table td').forEach(td => {
                    if(td.querySelector('.status-tag')) {
                        td.style.flexDirection = 'column';
                        td.querySelector('.status-tag').style.marginTop = '0.5rem';
                    }
                });
            }
        }
        window.addEventListener('resize', adjustLayout);
        adjustLayout();
    </script>

<script src="job.js"></script>
    
   
</body>
</html>